/** 水平分割 */
.split-group{height:200px}
.split-group:after{content:"";clear:both}
.split-group>.split-item{float:left;height:100%;box-sizing:border-box}

/** 垂直分割 */
.split-group-vertical{height:458px}
.split-group-vertical>.split-item{box-sizing:border-box}

/** 嵌套分割 */
.split-group>.split-item>.split-group-vertical{height:100%}
.split-group-vertical>.split-item>.split-group{height:100%}

/** 分割线 */
.gutter{position:relative;background-color:#f8f8f9;border:1px solid #dcdee2;box-sizing:border-box}

/** 水平分割线*/
.gutter.gutter-horizontal{float:left;height:100%;cursor:col-resize;border-top:none;border-bottom:none}
.gutter.gutter-horizontal:after,.gutter.gutter-horizontal:before{content:"";height:6px;border:2px solid #dcdee2;border-left:0;border-right:0;position:absolute;left:0;right:0}
.gutter.gutter-horizontal:before{top:50%;transform:translateY(-50%);margin-top:-8px}
.gutter.gutter-horizontal:after{margin-bottom:-8px;bottom:50%;transform:translateY(50%)}

/** 垂直分割线 */
.gutter.gutter-vertical{cursor:row-resize;border-left:none;border-right:none;text-align:center}
.gutter.gutter-vertical:after,.gutter.gutter-vertical:before{content:"";width:6px;border:2px solid #dcdee2;border-top:0;border-bottom:0;display:inline-block;height:100%;margin:0 3px;vertical-align:top}